$numberOfRects:20;

@use 'sass:math';
.frame{
    position: absolute;
    width: 400px;
    height: 400px;
    inset: 0;
    margin: auto;
    overflow: hidden;
    background-color: #222;
    box-shadow: 1px 2px 10px rgba(0,0,0,0.3);
    border-radius: 2px;
    color: #fff;
}

.rect{
    box-sizing: border-box;
    position: absolute;
    border: 1px solid #888;
    background-color: #222;
    inset: 0;
    margin: auto;
}

@for $i from 1 through $numberOfRects{
    .rect-#{$i}{
        $size: 210 - ($i * 10);
        $offset: math.div((400 - $size), 2);
        $color: 70 + ($i * 8);

        z-index: 1;
        width: $size + px;
        height: $size + px;
        border-color: rgba($color, $color, $color);

        animation: rotate 2s ease-in-out math.div($i, 30) + s alternate infinite;
    }
}

@keyframes rotate {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(306deg);
    }
}